@use 'sass:map';

@use './shared' as *;
@use './design' as *;

$collapse: () !default;
$collapse: map.merge(
  (
    header-color: inherit,
    header-color-hover: get-css-var('color-primary-base'),
    header-color-disabled: get-css-var('content-color-disabled'),
    header-bg-color: transparent,
    header-bg-color-card: get-css-var('fill-color-background'),
    arrow-color: get-css-var('content-color-secondary'),
    arrow-color-hover: get-css-var('color-primary-base'),
    arrow-color-disabled: get-css-var('content-color-humble'),
    content-color-disabled: get-css-var('content-color-disabled'),
    content-v-padding: 10px,
    content-h-padding: 16px,
    d-color: get-css-var('border-color-light-2'),
    divider: get-css-var('border-shape') get-css-var('collapse-d-color'),
    b-color: get-css-var('border-color-base'),
    border: get-css-var('border-shape') get-css-var('collapse-b-color'),
    radius: get-css-var('radius-base')
  ),
  $collapse
);

.#{$namespace}-collapse {
  &-vars {
    @include define-preset-values('collapse', $collapse);
  }

  @include basis;
  @include inherit-color;

  $header: #{&}__header;
  $arrow: #{&}__arrow;
  $content: #{&}__content;
  $divider: get-css-var('collapse-divider');
  $radius: get-css-var('collapse-radius');

  $content-padding: get-css-var('collapse-content-v-padding')
    get-css-var('collapse-content-h-padding');

  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  border-top: $divider;

  @at-root {
    &__panel {
      @include basis;
      @include inherit-color;

      padding: 0;
      margin: 0;
      list-style: none;
      border-top: $divider;
      border-bottom: $divider;

      &--card {
        #{$header} {
          border-radius: $radius;
        }

        #{$content} {
          padding: $content-padding;
          border-radius: 0 0 $radius $radius;
        }
      }

      &--expanded#{&}--card {
        #{$header} {
          border-bottom-color: get-css-var('collapse-d-color');
          border-radius: $radius $radius 0 0;
        }
      }

      &--ghost {
        border: 0;
      }
    }
  }

  & &__panel {
    border-top: 0;
  }

  &__arrow {
    position: absolute;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    color: get-css-var('collapse-arrow-color');
    transition: get-css-var('transition-color'), get-css-var('transition-transform');
    transform: translate(-50%, -50%);

    @include rtl {
      transform: translate(50%, -50%);
    }
  }

  &__header {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 14px;
    line-height: inherit;
    color: get-css-var('collapse-header-color');
    cursor: pointer;
    background-color: get-css-var('collapse-header-bg-color');
    border: 0;
    outline: 0;
    transition: get-css-var('transition-color');

    &:hover,
    &:focus {
      color: get-css-var('collapse-header-color-hover');

      #{$arrow} {
        color: get-css-var('collapse-arrow-color-hover');
      }
    }
  }

  &--arrow-left,
  &__panel--arrow-left {
    #{$header} {
      padding-inline-start: 36px;
    }

    #{$arrow} {
      inset-inline-start: 16px;
    }
  }

  &--arrow-right,
  &__panel--arrow-right {
    #{$header} {
      padding-inline-end: 36px;
    }

    #{$arrow} {
      inset-inline-start: calc(100% - 16px);
    }
  }

  &--arrow-none,
  &__panel--arrow-none {
    #{$arrow} {
      display: none;
    }
  }

  &__panel--expanded &__arrow {
    transform: translate(-50%, -50%) rotate(90deg);

    @include rtl {
      transform: translate(50%, -50%) rotate(90deg);
    }
  }

  &__panel--disabled &__header {
    cursor: not-allowed;

    &,
    &:hover,
    &:focus {
      color: get-css-var('collapse-header-color-disabled');

      #{$arrow} {
        color: get-css-var('collapse-arrow-color-disabled');
      }
    }
  }

  &__body {
    padding: 0 14px;
  }

  &__content {
    display: flex;
    flex-direction: column;
    padding: $content-padding;
  }

  &__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline-end: 4px;
  }

  &__panel--disabled &__content {
    color: get-css-var('collapse-content-color-disabled');
  }

  &--card,
  &__panel--card {
    border: get-css-var('collapse-border');
    border-radius: $radius;

    #{$header} {
      background-color: get-css-var('collapse-header-bg-color-card');
      border-bottom: get-css-var('border-shape') transparent;
    }
  }

  &--card &__panel {
    border-color: get-css-var('collapse-d-color');

    &:first-child #{$header} {
      border-radius: $radius $radius 0 0;
    }

    &:last-child {
      border-bottom: 0;

      #{$header} {
        border-radius: 0 0 $radius $radius;
      }
    }
  }

  &--card &__panel--expanded {
    #{$header} {
      border-bottom-color: get-css-var('collapse-d-color');
    }

    #{$content} {
      border-radius: 0 0 $radius $radius;
    }

    &:last-child #{$header} {
      border-radius: 0;
    }
  }

  &--ghost,
  &--ghost &__panel {
    border: 0;
  }
}
